<template>
  <div>
    <el-dialog class="tableDialog" title="车辆分组详情" :visible.sync="detailsVisible" width="800px">
      <section>分组名称:{{groupName}}</section>
      <el-tabs v-model="activeName" @tab-click="tabClick">
        <el-tab-pane label="分组属性" name="first">
          <Property ref="property"></Property>
          <section style="width: 600px"></section>
        </el-tab-pane>
        <el-tab-pane name="second">
          <span slot="label">
            车辆列表
            <!-- (<span class="color-primary"></span>) -->
          </span>
          <CarList></CarList>
        </el-tab-pane>
      </el-tabs>
<!--      <span slot="footer" class="dialog-footer">-->
<!--        <el-button type="primary" @click="detailsVisible = false"-->
<!--          >确定</el-button-->
<!--        >-->
<!--        <el-button @click="detailsVisible = false">取 消</el-button>-->
<!--      </span>-->
    </el-dialog>
  </div>
</template>
<script>
import CarList from "./carList";
import Property from "./property";
export default {
  components: {
    CarList,
    Property,
  },
  data() {
    return {
      detailsVisible: false,
      detailsId: "",
      activeName: "first",
      groupName:''
    };
  },
  methods: {
    tabClick(name) {},
  },
  mounted() {},
};
</script>
<style lang="scss" scoped>
::v-deep .el-dialog__wrapper .el-dialog .el-dialog__body {
.el-tabs{
    margin-top: 5px;
}
}
</style>
